<template>
	<view class="content">
		<view class="card flexr align-center">
			<view class="flex-1">
				<view>可用积分</view>
				<view class="score">38690</view>
			</view>
			<view class="score-detail">
				积分明细
			</view>
		</view>
		
		<view class="title">积分天天赚</view>
		
		<view class="flexr justify-spacebwt align-self-stretch">
			<view class="card2 flexc align-center justify-center flex-1">
				<image class="mall-icon" src="@/static/mall_icon_1.png"></image>
				<text class="text-color1">签到赚积分</text>
			</view>
			<view class="card2 flexc align-center justify-center flex-1">
				<image class="mall-icon" src="@/static/mall_icon_2.png"></image>
				<text class="text-color1">邀请赚积分</text>
			</view>
			<view class="card2 flexc align-center justify-center flex-1">
				<image class="mall-icon" src="@/static/mall_icon_3.png"></image>
				<text class="text-color1">消费赚积分</text>
			</view>
		</view>
		
		<view class="title">积分兑好物</view>
		<grid-view type="masonry"
			:cross-axis-count="2"
			:cross-axis-gap="12"
			:main-axis-gap="12"
		>
			<view
				class="shop-card flexc"
			>
				<image class="shop-icon" src="@/static/shop_removed.png"></image>
				<view class="shop-title">
					S系标准型高清镜片1
				</view>
				<view class="flexr align-center">
					<text class="shop-score">
						26480
					</text>
					<text class="score-label">
						积分
					</text>
				</view>
			</view>
			
			<view
				class="shop-card flexc"
			>
				<image class="shop-icon" src="@/static/shop_removed.png"></image>
				<view class="shop-title">
					SBOLON男女士高清光学眼镜片单装BOLON男女士高清光学眼镜片单装2
				</view>
				<view class="flexr align-center">
					<text class="shop-score">
						26480
					</text>
					<text class="score-label">
						积分
					</text>
				</view>
			</view>
			
			<view
				class="shop-card flexc"
			>
				<image class="shop-icon" src="@/static/shop_removed.png"></image>
				<view class="shop-title">
					SBOLON男女士高清光3
				</view>
				<view class="flexr align-center">
					<text class="shop-score">
						26480
					</text>
					<text class="score-label">
						积分
					</text>
				</view>
			</view>
		</grid-view>
		<view id="shops" class="flex-wrap flexc justify-spacebwt">
			
		</view>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { boundingClientRect } from '@/tools/tools';
import { ref, nextTick } from 'vue';
</script>

<style lang="scss">
.content {
	padding: 32rpx;
	overflow-y: scroll;
	background: linear-gradient(#FFEBC0, $bg-content, $bg-content, $bg-content);
	.card {
		background-color: white;
		border-radius: 12rpx;
		height: 192rpx;
		min-height: 192rpx;
		padding: 0 32rpx;
		.score {
			font-size: 64rpx;
			color: #E9A868;
		}
		.score-detail {
			color: $text-color2;
			width: 192rpx;
			height: 64rpx;
			border-radius: 32rpx;
			background-color: #FFEBC0;
			line-height: 64rpx;
			text-align: center;
		}
	}
	.title {
		color: black;
		font-size: 36rpx;
		margin-top: 64rpx;
		margin-bottom: 25rpx;
	}
	.card2 {
		background-color: white;
		border-radius: 12rpx;
		height: 218rpx;
		.mall-icon {
			width: 96rpx;
			height: 96rpx;
			margin-bottom: 14rpx;
		}
	}
	.card2 + .card2 {
		margin-left: 25rpx;
	}
	.shop-card {
		margin-bottom: 20rpx;
		background-color: white;
		border-radius: 12rpx;
		overflow: hidden;
		padding-bottom: 12rpx;
		align-self: flex-start;
		// color: $text-color1;
		.shop-icon {
			height: 325rpx;
			width: 100%;
			align-self: stretch;
			// margin-bottom: 10rpx;
		}
		.shop-title {
			color: $text-color1;
			margin-bottom: 6rpx;
			margin-top: 10rpx;
			padding: 0 20rpx;
		}
		.shop-score {
			font-size: 36rpx;
			color: #E9A868;
			margin-left: 20rpx;
		}
		.score-label {
			font-size: 24rpx;
			color: #E9A868;
			align-self: flex-end;
			margin-bottom: 8rpx;
			margin-left: 10rpx;
		}
	}
}
</style>
